<template>
	<el-dialog v-model="visible" :destroy-on-close="true" :width="700" top="5" title="意见反馈">
		<el-form ref="ruleFormRef" label-position="top" :rules="rules" :model="formData" label-width="100px">
			<el-row>
				<el-col :span="24">
					<el-form-item label="反馈类型" prop="lx" required>
						<el-radio-group v-model="formData.lx">
							<el-radio label="意见反馈" />
							<el-radio label="问题反馈" />
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="反馈内容" prop="nr" required clearable>
						<el-input v-model="formData.nr" type="textarea" :rows="4" placeholder="反馈内容" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="反馈图片">
						<UploadFile v-model="formData.fj" :limit="3" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import rulesObj from './rulesOpinion';
import { useHandleData } from '/@/hooks/useHandleData';
import { add } from '../../../api/system/opinion'
import UploadFile from '/@/components/UploadFile/index.vue';

const formData = ref<any>({
	lx: '',
	nr: '',
	fj: ''
});

const acceptParams = () => {
	formData.value = {
		lx: '',
		nr: '',
		fj: ''
	}
	visible.value = true;
}

//验证规则
const rules = reactive<FormRules>(rulesObj), visible = ref<boolean>(false), loading = ref<boolean>(false);

const ruleFormRef = ref<FormInstance>();

const handleSubmit = () => {
	ruleFormRef.value!.validate(async (valid) => {
		if (!valid) return;
		const res: any = await useHandleData(add, formData.value, '提交意见反馈');
		if (res && res.code === 0) {
			visible.value = false;
		}

	});
}

defineExpose({
	acceptParams,
});
</script>
